<!--
 * @Description:
 * @version:
 * @Author: 尹鹏孝
 * @Date: 2022-12-19 10:53:04
 * @LastEditors: 尹鹏孝
 * @LastEditTime: 2022-12-20 10:05:18
-->

<script setup lang="ts">
import { useAttrs, inject,ref } from 'vue'
import type { Ref } from 'vue'
export interface Props {
    msg?: string
    labels?: string[],
    name?:string,
    likes?: number,
    title?:string
}
const year = ref<string | number>('2020')
const years = ref<string|number>('2022')
const year2020: Ref<string | number> = ref('2020')
const year2022:Ref<string|number> = ref(2022)
const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})
const i18n = inject('i18n')

console.log(i18n.greetings.hello)
const emit = defineEmits<{
    (e: 'enlarge-text', name: string, roadId: string): void,
    (e: 'lower-text', name: string, roadId: string): void,
    (e:'set-color',age:number,page:number):void
}>()
const attrs = useAttrs()
const submit = () => {
    console.log(attrs)
    emit('set-color',10,99)
}
</script>

<template>
  <h4>{{ title }}</h4>
  <a-button  @click="$emit('enlarge-text')">增大字号</a-button>
  <a-button  @click="$emit('lower-text')">缩小字号</a-button>
   <a-button  @click="submit">改变颜色</a-button>
   <a-button class="fancy-btn">
    111
        <slot>qqq</slot>
    </a-button>
</template>